<template>
  <div class="w-full">
    <!-- @tailwindcss/typography 示例 -->
    <article class="prose lg:prose-xl mb-12 max-w-none">
      <h1>Typography 插件示例</h1>
      <p>这是一个段落，使用 typography 插件会自动应用优雅的排版样式。</p>
      <blockquote>引用块也会有特殊的样式</blockquote>
      <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
      </ul>
    </article>

    <!-- @tailwindcss/forms 示例 -->
    <div class="max-w-md mb-12">
      <h2 class="text-2xl font-bold mb-4">Forms 插件示例</h2>
      <form class="space-y-4" @submit.prevent="handleSubmit">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700">
            邮箱
          </label>
          <div class="mt-1">
            <input
              id="email"
              v-model="email"
              type="email"
              required
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-gray-100"
              :class="{ 'border-red-500': emailError }"
              placeholder="your@email.com"
              @blur="validateEmail"
            />
            <p v-if="emailError" class="mt-1 text-sm text-red-600">
              {{ emailError }}
            </p>
          </div>
        </div>

        <div>
          <label for="select" class="block text-sm font-medium text-gray-700">
            选择框
          </label>
          <select
            id="select"
            v-model="selected"
            required
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
          >
            <option value="" disabled>请选择一个选项</option>
            <option v-for="option in options" :key="option">{{ option }}</option>
          </select>
        </div>

        <div class="flex items-center">
          <input
            id="remember"
            v-model="remember"
            type="checkbox"
            class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
          />
          <label for="remember" class="ml-2 block text-sm text-gray-700">
            记住我
          </label>
        </div>

        <div class="flex items-center justify-end">
          <button
            type="submit"
            :disabled="isSubmitting"
            class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
          >
            {{ isSubmitting ? '提交中...' : '提交' }}
          </button>
        </div>
      </form>
    </div>

    <!-- @tailwindcss/aspect-ratio 示例 -->
    <div class="max-w-md mb-12">
      <h2 class="text-2xl font-bold mb-4">Aspect Ratio 插件示例</h2>
      <!-- 16:9 宽高比 -->
      <div class="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
        <img
          class="object-cover w-full h-full transition-opacity duration-300"
          :class="{ 'opacity-0': !imageLoaded }"
          :src="imageUrl"
          alt="示例图片"
          @load="imageLoaded = true"
        />
        <div
          v-if="!imageLoaded"
          class="absolute inset-0 flex items-center justify-center"
        >
          <div class="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
        </div>
      </div>
      <!-- 1:1 宽高比 -->
      <div class="mt-4 aspect-w-1 aspect-h-1 bg-gray-100 rounded-lg overflow-hidden">
        <img
          class="object-cover w-full h-full transition-opacity duration-300"
          :class="{ 'opacity-0': !squareImageLoaded }"
          :src="imageUrl"
          alt="示例图片"
          @load="squareImageLoaded = true"
        />
        <div
          v-if="!squareImageLoaded"
          class="absolute inset-0 flex items-center justify-center"
        >
          <div class="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 表单数据
const email = ref('')
const emailError = ref('')
const selected = ref('')
const options = ['选项 1', '选项 2', '选项 3']
const remember = ref(false)
const isSubmitting = ref(false)

// 邮箱验证
const validateEmail = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!email.value) {
    emailError.value = '请输入邮箱地址'
  } else if (!emailRegex.test(email.value)) {
    emailError.value = '请输入有效的邮箱地址'
  } else {
    emailError.value = ''
  }
}

// 表单提交
const handleSubmit = async () => {
  validateEmail()
  if (emailError.value || !selected.value) {
    return
  }

  isSubmitting.value = true
  try {
    // 模拟 API 请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('表单提交:', {
      email: email.value,
      selected: selected.value,
      remember: remember.value
    })
    // 重置表单
    email.value = ''
    selected.value = ''
    remember.value = false
  } finally {
    isSubmitting.value = false
  }
}

// 图片加载状态
const imageLoaded = ref(false)
const squareImageLoaded = ref(false)

// 使用更可靠的图片服务
const imageUrl = 'https://picsum.photos/800/450'
</script>